
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
     
    <link rel="stylesheet"  href="user.css">
    <script src="./static/js/vue.global.js"></script>

   
        <link rel="stylesheet" href="./static/element-plus/index1.css" />
        <script src="./static/element-plus/index.full.js"></script>
 <style>
    .main{
        width: 1200px;
        margin: 0 auto;
       
        background-color: white;  
    }
    ul{
        list-style: none;
    }
    
 </style>
</head>
<body>
    <div id="app">
        
            <el-container style=" background-color: #f5f5f5;">
              
            <el-header style=" background-color: #fff;">
                <el-row style="display: flex;align-items:center">
                <el-col :span="4" style="display: flex;">
                     <div>
                          <el-image style="width: 60px; height:60px" src="./static/img/logo.png" :fit="fit">
                   
                     </div>    
                     <div>
                        <h1 style="padding-left:20px;">技术社区</h1>
                     </div>
                
                </el-col>
                    <el-col :span="8">
                        <el-menu mode="horizontal" style="border:0!important;margin-top:-10px ;">
                            <el-menu-item>首页</el-menu-item>
                            <el-menu-item>文章</el-menu-item>
                            <el-menu-item>课程</el-menu-item>
                            <el-menu-item>商城</el-menu-item>
                        </el-menu>
                    </el-col>
                    <el-col :span="8">
                        <el-input style="width: 200px;" placeholder="请输入关键字"></el-input>
                    </el-col>
                    <el-col :span="4" >
                        
                        <el-button  type="text" v-on:click="alert('nb')">登录</el-button>            
                        <el-button  type="text">注册</el-button> 
                        
                    </el-col>
                   </el-row>
            </el-header>
                <el-main class="main">
                    <el-carousel height="400px">
                        <el-carousel-item v-for="item in carousels">
                            <img v-bind:src="item" width="100%" height="100%">
                        </el-carousel-item> 
                        
                      </el-carousel>
                      <el-row style="position: relative; top: 30px;">
                        <el-col :span="8">
                            <div>
                                <el-text size="large" type="primary">热门文章</el-text>
                                <el-button size="small" style="float:right;margin-right:10px">查看更多</el-button>
                            </div>
                            <ul>
                                <li v-for=" post in postList" style="line-height: 15px;">
                                    <p>{{post.title}}</p>
                                    <el-text size="small" type="success" >{{post.date}}</el-text>
                                </li>
                            </ul>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-text size="large" type="primary">热门课程</el-text>
                                <el-button size="small" style="float:right;margin-right:10px">查看更多</el-button>
                            </div>
                            <ul>
                                <li v-for=" po in post" style="line-height: 15px;">
                                    <p>{{po.title}}</p>
                                    <el-text size="small" type="success">{{po.mony}}</el-text>
                                </li>
                            </ul>

                        </el-col>
                        <el-col :span="8">
                            <div>
                                <el-text size="large" type="primary">热门商品</el-text>
                                <el-button size="small" style="float:right;margin-right:10px">查看更多</el-button>
                            </div>
                            <el-carousel height="200px">
                                <el-carousel-item v-for="item in carousels">
                                    <img v-bind:src="item" width="100%" height="100%"
                                    style="padding: 20px;">
                                </el-carousel-item>  
                              </el-carousel>

                        </el-col>
                      </el-row>
                </el-main>
                 <el-footer style="height: auto;">
                         <el-row>
                            <el-col :span="8">
                                <div>
                                <el-image style="width: 100px; height:100px" src="./static/img/logo.png" :fit="fit">
                                </div>
                               <div style="position: relative; left: 100px; bottom: 100px;">   
                                  <h1 style="padding:2px;">技术社区</h1>
                                  <p>致力于构建一个专业胡IT技术交流社区</p>
                              </div>
                            </el-col>
                            <el-col :span="8" style="position: relative; top: 20px;">
                                <div>
                                    <el-button type="text">首页</el-button>
                                    <el-button type="text">文章</el-button>
                                    <el-button type="text">课程</el-button>
                                    <el-button type="text">商城</el-button>
                                </div>
                                <div>
                                    <el-button type="text">关于我们</el-button>
                                    <el-button type="text">使用手册</el-button>
                                    <el-button type="text">隐私条款</el-button>
                                    <el-button type="text">建议反馈</el-button>
                                </div>
                            </el-col>
                            <el-col :span="8" style="position:relative; bottom: -10px;line-height: 10px;">
                            <h1>联系我们</h1>
                            <div><P>电话:12345678</P>
                            <p>邮箱:software@develop.com</p></div>
                            </el-col>
                         </el-row>
                         <div style="position: relative; bottom: 100px; height:50px;line-height:50px;text-align:center;background-color:#409EFF">软件开发工作室版权所有</div>
                </el-footer>
            </el-container>
           
          
    </div>
</body>
  <script>
       const App={
        data(){
   return{
        carousels:['./static/img/carousel0.jpg',
        './static/img/carousel1.jpg',
        './static/img/carousel2.jpg',
        './static/img/carousel3.jpg'],
       postList:[
           {title:"vue3.0 新特性使用攻略",date:'2024-10-28'},
           {title:"vite脚手架使用详解",date:'2024-10-25'},
           {title:"ElementPlus框架应用场景",date:'2024-10-17'},
           {title:"5款独立开发者必备神器",date:'2024-10-12'},
    ],
    post:[
           {title:"0基础学javascrict",mony:'¥59'},
           {title:"vue.js从入门到实战",mony:'¥199'},
           {title:"深入浅出状态管理",mony:'¥29'},
           {title:"说透大厂前端项目场景面试",mony:'¥69'},
    ],
   }
        },
        methods:{

        }
       }
       Vue.createApp(App).use(ElementPlus).mount("#app")
  </script>
</html>